<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 分别写出下列方法的作用以及基本案例：
        /* 数组方法： 
                find() ：返回第一个成立项
                findIndex() ：返回第一个成立索引
                includes()：查找字符，返回布尔值
                reduce()：遍历累计 
                */
        {
            // 1.includes()
            let arr = [1, 3, 5, 7]
            let flag = arr.includes(1)//true
            console.log(flag);

            // 2.reduce()
            let arr2 = [
                { num: 10 },
                { num: 20 },
                { num: 30 }
            ]
            let numS = arr2.reduce((pre, cur, index) => {
                // console.log(pre, cur, index);
                return pre + cur.num
            }, 0)
            console.log(numS);

            // 3.find()
            // return第一次成立的值,后中断函数
            // 不成立return undefined
            var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
            let res = arr3.find(item => {
                return item > 5//6
            })
            console.log(res);

            // 4.findIndex():
            // return 返回成立的项的索引
            var arr4 = [12, 16, 18, 20]
            let index = arr4.findIndex(item => item >= 18) //2
            console.log(index);
        }

        /* 字符串方法： 
                includes() ：判断包含的字符，返回布尔值
                startsWith() ：判断开头，返回布尔值
                endsWith() ：判断结尾，返回布尔值
                replaceAll() ：替换所有符合的字符*/

        {
            // 1.includes()
            let str = '12345'
            let res = str.includes(1)
            console.log(res);
            // 2.startsWith() ：判断以什么开头，第二个参数可以从第几个字符开始
            var str2 = "Hello world, welcome to the Runoob.";
            var n = str2.startsWith("world", 6);//true 必须第一个字符开始 对应上
            var m = str2.startsWith("world", 5);//false
            console.log(n);
            // 3. endsWith() :判断以什么结尾
            var str3 = "Hello world, welcome to the universe.";
            var n = str3.endsWith("universe.");
            console.log(n);//true
            // 4.replaceAll()：代替所有符合的字符
            var str4 = "Visit Microsoft! Visit Microsoft!";
            var n = str4.replaceAll("Microsoft", "Runoob");
            console.log(n);
        }
        /* 1、封装一个函数返回字符串的长度
            给定一个字符串如：“abaasdffggghhjjkkgfddsssss3444343”问题如下：?
         * console.log(strLength(str)) // 33
            方法：.length
                
         */

        {
            // 1、封装一个函数返回字符串的长度
            let str = 'abaasdffggghhjjkkgfddsssss3444343'
            function strLength(val) {
                return val.length
            }
            console.log(strLength(str));
        }
        /* 2、已知有字符串foo=”get-element-by-id”
        * 写一个function将其转化成驼峰表示法”getElementById”
        * console.log(camelCase('get-element-by-id')) // getElementById
        */
        {
            // 2.已知有字符串foo =”get - element - by - id”
            /*
                方法：
                    1.split()
                    2.toUpperCase()
            */

            let foo = 'get-element-by-id'
            function camelCase(val) {
                // 找到-对应的索引
                let arr = val.split('-')
                let str = ''
                arr.forEach(item => {
                    for (var i = 0; i < item.length; i++) {
                        if (i == 0) {
                            str += item[i].toUpperCase()
                        } else {
                            str += item[i]
                        }
                    }
                })
                return str
            }
            console.log(camelCase(foo));
        }

        /*3、请编写一个 JavaScript 函数 parseQueryString，它的用途是把 URL 参数解析为一个对象，如：
        var url = “http://www.taobao.com/index.html?key0=0&key1=1&key2=2”
        var obj = parseQueryString(url)
        console.log(obj.url)  //  http://www.taobao.com/index.html
        console.log(obj.key0) //  0
        console.log(obj.key1) //  1
        console.log(obj.key2) //  2
        */
        //    obj={
        //     url:'http://www.taobao.com/index.html',
        //     key0:0
        //    }
        /*
            方法：
                1.split()
                2.obj['属性']=值
        */
        {
            var url = 'http://www.taobao.com/index.html?key0=0&key1=1&key2=2';
            // 2.调用
            // 接受return的obj
            let obj = parseQueryString(url)
            // 1.封装
            function parseQueryString(val) {
                // split拆分：返回一个数组
                let arr1 = val.split('?')
                console.log(arr1);//[http...,key...]
                let obj = {}
                obj.url = arr1[0]//{url:http}
                let arr2 = arr1[1].split('&')//[key=0,..]
                console.log(arr2);
                // let num = 0
                // let arr3 = arr2[0].split('=')//[key0,0]
                // obj['key' + num] = arr3[1]{key0:0}
                // obj['key' + 0] = arr3[1]{key0:0}
                for (let i = 0; i < arr2.length; i++) {
                    // obj['key' + num] = arr2[i].split('=')[1]
                    obj['key' + i] = arr2[i].split('=')[1]
                    // num++
                }
                // console.log(obj);
                return obj
            }
            // 3.打印
            // 可以直接使用.属性
            console.log(obj);
            console.log(obj.url);//url
            console.log(obj.key1); //1
        }

        //4、封装一个函数实现对当前时间格式化 要求月,日小于10在前面补0 2019-05-08  2019-12-01
        //var dt = new Date()
        //console.log(formatDate(dt)) // 2022-09-09
        {
            /*
                方法：
                    1.new Date().获取年月
                    2.join('-')
            */
            // var dt = new Date()
            // var year = dt.getFullYear()
            // var month = dt.getMonth()
            // var day = dt.getDate()
            // function getVal(val) {
            //     if (val < 10) {
            //         val = '0' + val
            //     }
            //     return val
            // }
            // month = getVal(month)
            // day = getVal(day)
            // console.log(year + '-' + month + '-' + day);

            function formatDate(dt) {
                // var dt = new Date()
                var year = dt.getFullYear()
                var month = dt.getMonth()
                var day = dt.getDate()
                function getVal(val) {
                    if (val < 10) {
                        val = '0' + val
                    }
                    return val
                }
                month = getVal(month)
                day = getVal(day)
                console.log(year + '-' + month + '-' + day);
            }
            formatDate(dt = new Date())
        }

        /* 
            5、 封装一个函数，专门用于数组去重
            let arr = ['a', 'b', 'a', 'c', 'a', 'b', 'd', 'e'];
            console.log(getOnly(arr))      // ['a', 'b', 'c', 'd', 'e']

            思路：可以试试对象Object.keys()，filter(),Set。
            方法:
                1.Set
                    new.Set().add()
            // 1.forEach+includes方法
            // 2.forEach+indexOf()方法
            // 3.filter+indexOf(方法):判断首次出现的索引
            // 4.object.keys()+处理成对象(利用对象属性名不重复)
            // 5.Set()+.add() 利用实例的Set对象只能.add一次


        */
        {
            let arr = ['a', 'b', 'a', 'c', 'a', 'b', 'd', 'e']
            // 1.forEach+includes方法
            // let arr2 = []
            // arr.forEach((item, index, arr) => {
            //     if (!arr2.includes(item)) {
            //         arr2.push(item)
            //     }
            // }
            // )
            // console.log(arr2)
            // 2.forEach+indexOf()方法
            // let arr2 = []
            // arr.forEach((item, index, arr) => {
            //     if (arr2.indexOf(item) === -1) {
            //         arr2.push(item)
            //     }
            // }
            // )
            // console.log(arr2)
            // 3.filter+indexOf(方法):判断首次出现的索引
            // let arr2 = []
            // arr2 = arr.filter((item, index) => {
            //     return arr.indexOf(item) === index
            // })
            // console.log(arr2);
            // 4.object.keys()+处理成对象(利用对象属性名不重复)
            // var obj = {}
            // arr.forEach((item, index) => {
            //     obj[item] = item
            // })
            // obj = Object.keys(obj)
            // console.log(obj);
            // 5.Set()+.add() 利用实例的Set对象只能.add一次
            // var set = new Set()
            // arr.forEach(item => {
            //     set.add(item)
            // })
            // console.log(set);
            function getOnly(val) {
                var set = new Set()
                val.forEach(item => {
                    set.add(item)
                })
                return set
            }
            console.log(getOnly(arr));
        }
        {
            //6. 寻找最长的单词的长度
            //返回提供的句子中最长的单词的长度。返回值应该是一个数字。
            /*  
                console.log(getLongCount("The quick brown fox jumped over the lazy dog")); //6
                方法:
                    1.split('')
                    2. obj[属性]=值
                    3.for (key in obj) 
                    4.Math.max(...arr)
            */
            var str = "The quick brown fox jumped over the lazy dog"
            // 方法：slice+遍历+获取长度
            // var str2 = str.split(' ')
            // console.log(str2);//['The'...]
            // var obj = {}
            // str2.forEach((item, index) => {
            //     obj[item] = item.length
            // })
            // console.log(obj);//{ The: 3,quick:5 ...}]
            // let arr = []
            // for (key in obj) {
            //     arr.push(obj[key]);//[3,5]
            // }
            // var a = Math.max(...arr)
            // console.log(a);//6
            // console.log(i = arr.indexOf(a));//4
            // console.log(str2[i]);//jumped
            function getLongCount(val) {
                var str2 = str.split(' ')
                // 1.获取字母数组
                console.log(str2);//['The'...]
                // 2.获取对象数组
                var obj = {}
                str2.forEach((item, index) => {
                    obj[item] = item.length
                })
                console.log(obj);//{ The: 3,quick:5 ...}]
                // 3.获取数字数组
                let arr = []
                for (key in obj) {
                    arr.push(obj[key]);//[3,5]
                }
                // 4.获取最大值
                var a = Math.max(...arr)
                return a
            }
            console.log(getLongCount(str));
        }
    </script>
</body>

</html>